<template>
  <el-tabs v-model="activeName" tab-position="left" class="left-aside">
    <template v-for="tabItem in tabs">
      <el-tab-pane  :key="tabItem.name" :name="tabItem.name" lazy>
        <template #label>
          <div class="tab-item">
            <i :class="tabItem.icon"></i>
            {{ tabItem.label }}
          </div>
        </template>
        <component :is="tabItem.name" v-bind="$attrs" />
      </el-tab-pane>
    </template>
  </el-tabs>
</template>

<script>
import components from './components'

const tabs = Object.keys(components)
  .map((name) => {
    const { label, icon, order } = components[name]
    return { label, icon, name, order }
  })
  .sort((a, b) => a.order - b.order)

export default {
  name: 'LeftAside',
  components,
  data() {
    return {
        activeName: tabs[0].name,
        tabs,
    }
  }
}
</script>

<style lang="scss">
.left-aside {
  height: 100%;
  .el-tabs__header {
    margin-right: 0;
    .el-tabs__item {
      height: 80px;
      padding: 20px 16px;
      .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        [class^='el-icon-'] {
          font-size: 20px;
        }
      }
    }
  }

  > :deep(.el-tabs__content) {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
